<template lang="">
  <div>
    <!-- svg 精灵图 的封装图标需要传参 icon-class -->
    <svg-icon :icon-class="isfullscreen?'exit-fullscreen':'fullscreen'" class="fullscreen" @click="toggleFullScreen" />
  </div>
</template>
<script>
import ScreenFull from 'screenfull/dist/screenfull'
export default {
  name: 'ScreenFull',
  data() {
    return {
      isfullscreen: false
    }
  },
  //   computed: {
  //     fullscreen() {
  //       // 计算是否 为true或false
  //     }
  //   },
  //   created() {

  //   },
  methods: {
    toggleFullScreen() {
      // 查看是否支持全屏
      if (ScreenFull.enabled) {
        ScreenFull.toggle()
        this.isFullScreen = !this.isFullScreen
        console.log(this.isfullscreen)
      } else {
        // 不支持
        this.$message.error('浏览器版本过低, 不支持全屏')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.fullscreen {
  width: 20px;
  height: 20px;
  fill: #fff !important;
  cursor: pointer;
}
</style>
